<template>
  <div>
    <h1>员工管理</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>性别</th>
          <th>联系方式</th>
          <th>职位</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.id }}</td>
          <td>
            <input v-model="employee.name" type="text" />
          </td>
          <td>
            <select v-model="employee.gender">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </td>
          <td>
            <input v-model="employee.contact" type="text" />
          </td>
          <td>
            <input v-model="employee.position" type="text" />
          </td>
          <td>
            <button @click="updateEmployee(employee)">保存</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      employees: []
    };
  },
  mounted() {
    this.fetchEmployees();
  },
  methods: {
    async fetchEmployees() {
      try {
        const response = await axios.get('http://localhost:3001/api/employees');
        this.employees = response.data.data;
      } catch (error) {
        console.error('获取员工数据出错:', error);
      }
    },
    async updateEmployee(employee) {
      try {
        const response = await axios.put(
          `http://localhost:3001/api/employees/${employee.id}`,
          employee
        );
        console.log(response.data.message);
      } catch (error) {
        console.error('更新员工数据出错:', error);
      }
    }
  }
};
</script>